<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="openModal" v-permission="'changeStation.add'">指定工站</el-button>
    <div class="filter-container">
      <el-select class="filter-item" v-model="query.queryType" placeholder="请选择操作模式">
        <el-option v-for="i in queryTypeOptions" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <template v-if="query.queryType==1">
        <el-input style="width: 240px;" placeholder="输入工单号" clearable prefix-icon="el-icon-search" class="filter-item"
          @change="queryMoChange" v-model="query.mo"></el-input>
        <el-select clearable class="filter-item" v-model="query.group" placeholder="当前工序">
          <el-option v-for="(i,index) in groupOptions" :label="i.group_name" :value="i.group_id" :key="index">
          </el-option>
        </el-select>
        <el-select clearable class="filter-item" style="width: 240px;" v-model="query.nextGroup" placeholder="当前已指站工序">
          <el-option v-for="(i,index) in groupOptions" :label="i.group_name" :value="i.group_id" :key="index">
          </el-option>
        </el-select>
      </template>
      <el-input v-if="query.queryType==2" style="width: 300px;" placeholder="输产品/包装序号按回车" clearable
        prefix-icon="el-icon-search" class="filter-item" @change="snChange" @keyup.enter.native="research"
        @clear="clear" v-model="query.sn"></el-input>
      <el-button v-if="!!query.queryType" type="success" plain @click="research" class="filter-item">查询</el-button>
    </div>
    <el-table :data="list" style="width: 100%" border>
      <template v-for="(f,name) in config.fields">
        <el-table-column v-if="!f.grid.hidden" :key="name" :label="f.label" :prop="name" show-overflow-tooltip
          :width="f.grid.width">
          <template slot-scope="{row}">
            {{row[name]}}
          </template>
        </el-table-column>
      </template>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @pagination="getList" />
    <el-dialog title="指定工站" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <el-select v-model="group" filterable style="width: 100%;" placeholder="请选择工站">
        <el-option v-for="(i,index) in groupOptions" :label="i.group_name" :value="i.group_id" :key="index"></el-option>
      </el-select>
      <el-input style="margin-top: 12px" type="textarea" placeholder="请输入指站原因说明" v-model="remarks">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit" :loading="submitLoading">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

const source_config = {
  fields: {
    mo_no: { label: '工单号', grid: { width: 140 } },
    serial_number: { label: '序号', grid: { width: 170 } },
    package_level: { label: '包装层级', grid: { width: 120 } },
    line_name: { label: '最后线别', grid: { width: 120 } },
    group_name: { label: '最后工序', grid: { width: 120 } },
    in_station_time: { label: '过站时间', grid: { width: 140 } },
    next_station_name: { label: '品质指站', grid: { width: 120 } },
    sku_no: { label: '产品型号', grid: { width: 130 } },
    sku_name: { label: '产品型号名称', grid: {} },
    batch_qty: { label: '当前产品数量', grid: { width: 100 } },
  },
}
const emptyData = {}
export default {
  components: { Pagination },
  name: 'changeStation',
  data: function () {
    return {
      name: '指定工站',
      api: this.$api.changeStation,
      pageLoading: false,
      submitLoading: false,
      query: {
        queryType: null,
        page: 1,
        size: 10,
      },
      list: [],
      total: 0,
      remarks: '',
      data: { ...emptyData },
      dialogVisible: false,
      config: source_config,
      group: '',
      groupOptions: [],
      queryTypeOptions: [
        { value: 1, label: '按工单指站' },
        { value: 2, label: '按流转序号指站' },
      ],
    }
  },
  methods: {
    queryMoChange() {
      this.query.mo = this.query.mo.trim()
    },
    getGroupOptions() {
      this.$request(this.api + 'getgroup', this.query)
        .then((r) => {
          this.groupOptions = r
        })
        .catch(() => {})
    },
    getList() {
      this.pageLoading = true
      this.getGroupOptions()
      this.$request(this.api + 'check', this.query, 'post')
        .then((r) => {
          this.pageLoading = false
          this.list = r.list
          this.total = r.total
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    openModal() {
      this.remarks = ''
      this.group = ''
      this.dialogVisible = true
    },
    clear() {
      this.query.page = 1
      this.total = 0
      this.list = []
    },
    snChange() {
      this.query.sn = this.query.sn.trim()
    },
    research() {
      this.clear()
      this.getList()
    },
    submit: function () {
      if (!this.total > 0) {
        this.$message({
          message: '当前输入的查询条件没有检索到信息',
          type: 'error',
        })
        return
      }
      this.submitLoading = true
      let url = this.api + 'update'
      this.$request(
        url,
        {
          query: this.query,
          toGroup: this.group,
          remarks: this.remarks,
        },
        'post',
      )
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: `操作成功，更新数据${r}条`,
            type: 'success',
          })
          this.group = ''
          this.dialogVisible = false
          this.getList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
  },
  created: function () {},
  watch: {
    data: function (val) {},
  },
}
</script>

<style scoped>
</style>
